<extend name="common/base" />
<block name="resource">
     <script type="text/javascript">
        var matchDevice = /iphone|ipod|ipad|Windows Phone|android|mobile/i;
        if((matchDevice.test(navigator.userAgent.toLowerCase()))){
            location.href = "{:C('LOCAL_DOMAIN')}/download/mobile";
        }
     </script>
     <link rel="stylesheet" href="__ASSET__/Download/css/mobile.css" type="text/css" />
     <link href="__ASSET__/Home/v4/src/css/public/jquery.mCustomScrollbar.min.css" rel="stylesheet">
     <link href="__ASSET__/Home/v4/src/css/public/video-pop.css" rel="stylesheet">
     <script src="__ASSET__/Home/v4/lib/js/jquery.mCustomScrollbar.concat.min.js"></script>
     <style>
       .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
           background:rgba(52,159,249,.85);
        }
        .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{
              background:rgba(52,159,249,.85);
        }
       .version_body_title .page5_text_1_t{
             color:#666666;
             font-family:"宋体";
        }
        .sub_pc_title{
             color:#666666;
             font-family:"宋体";
        }
     </style>
</block>
<block name="content">
     <section class="page1  wow fadeIn" data-wow-duration="1s">
        <div class="main_comtain main_comtain_margin">
            <div class="col-60 left relative" style="z-index:12;">
                 <div class="page1_pc_1 wow zoomIn" data-wow-duration="0.6s"></div>
            </div>
            <div class="col-35 right relative page1_contain">
                  <div class="page1_pc_2 absolute">
                       <p class="title1">66Play PC录制工具</p>
                       <p class="title2 page1_pc_3">轻量录制 · 一键编辑 · 保存游戏足迹</p>
                       <div class="page1_div_btn">
                              <a onclick="_hmt.push(['_trackEvent', 'PC工具下载', 'PC下载页', '下载-顶部']);" href="{:C('LOCAL_DOMAIN')}/download/pc" class="btn1 page1_btn_1">立即下载</a>
                       </div>
                  </div>
                  <div class="page1_p_1x wow fadeIn" data-wow-duration="1s"></div>
                  <div class="page1_p_2x wow fadeIn" data-wow-duration="1s" data-wow-delay=".5s"></div>
                  <div class="page1_p_3x wow fadeIn" data-wow-duration="1s" data-wow-delay=".6s"></div>
            </div>
        </div>
     </section>
     <section  class="page1-1  wow fadeIn" data-wow-duration="1s">
            <div class="main_comtain main_comtain_1">
                 <ul class="ul_intro">
                   <li class="wow zoomIn"  data-wow-duration="1.5s"  data-wow-delay="0.5s">
                         <div  class="icon_1"></div>
                         <p class="text_1">占用资源最少,永久免费,录制剪辑分享一步到位</p>
                   </li>
                   <li class="wow zoomIn"  data-wow-duration="1.5s">
                         <div  class="icon_1 icon_2"></div>
                         <p class="text_1">一键回录两分钟精彩片段节约大量剪辑时间</p>
                   </li>
                   <li class="wow zoomIn"  data-wow-duration="1.5s">
                         <div  class="icon_1 icon_3"></div>
                         <p class="text_1">随时随地自由分享告别吹逼无门，口说无凭</p>
                   </li>
                 </ul>
            </div>
    </section>
    <section class="page2">
            <div class="main_comtain">
                 <div class="col-60 left">
                          <div class="page1_pc_1 page2_pc_1 wow zoomIn" data-wow-duration="0.5s" data-wow-delay="0.5s"></div>
                 </div>
                 <div class="col-40 left">
                          <p class="title3 wow fadeInUp page2_title" data-wow-duration="1s"><span class="radius-3">1</span>轻量录制</p>
                          <p class="title4 margin-10 wow fadeInUp" data-wow-duration="1s">最好用的超轻量级录制工具</p>
                          <p class="title4 margin-10 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
                            占用资源最小，永久免费，录制剪辑分享一步
                          </p>
                          <p class="title4 margin-10 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">到位。</p>
                          <p class="page2_title_num wow shake" data-wow-offset="50" data-wow-iteration="infinite" data-wow-duration="3s" data-wow-delay="2s">200<span>%</span></p>
                          <p class="title4 margin-10 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".6s">运行效率提升</p>
                          <p class="title4 margin-10 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".7s">RAM占用量</p>
                          <div class="page2_count_num wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s">
                               <p class="title4 margin-10"><span class="page2_ban2"></span>66Play 录制工具</p>
                               <p class="title4 margin-10"><span class="page2_ban2 page2_ban3"></span>某录制软件</p>
                          </div>
                          <p class="title4 page2_text_1 margin-10 wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s">*此数据为实验室数据</p>
                 </div>
            </div>
    </section>
    <section class="page3"  id="page3">
             <div class="main_comtain" >
                 <div class="col-50 left">
                       <p class="title3 wow fadeInUp page3_title" data-wow-duration="1s"><span class="radius-3">2</span>一键记录</p>
                       <p class="title4 page3_text_1 margin-10 wow fadeInUp" data-wow-duration="1s">独创时光机录制模式，一键记录你的游戏</p>
                       <p class="title4 page3_text_1 margin-10 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">青春。一键回录两分钟精彩片段，节省大</p>
                       <p class="title4 page3_text_1 margin-10  wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">量剪辑时间。</p>
                       <div class="page3_time_p_1 margin-10 wow zoomIn" data-wow-duration="1s" data-wow-delay=".7s"></div>
                 </div>
                 <div class="col-50 right">
                     <div class="page3_p_c_1 relative">
                          <div  class="video_contain"><div id="mod_player"></div></div>
                     </div>
                 </div>
             </div>
    </section>
    <section class="page4">
           <div class="main_comtain">
                   <p class="title3 page4_p_title_1 wow fadeInUp page3_title" data-wow-duration="1s"><span class="radius-3">3</span>全平台制霸</p>
                   <p class="title4 center margin-10 margin-bottom-10 wow fadeInUp" data-wow-duration="1s">随时随地自由分享，告别吹比无门，口说无凭</p>
                   <p class="title4 center margin-10 margin-bottom-10 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">游戏or直播，暴走or搞笑，精彩瞬间不再错过</p>
                   <div  class="page4_pic_show">
                        <div class="page4_first_pic  wow zoomIn" ata-wow-duration=".2s" data-wow-delay="1s"></div>
                        <div class="page4_first_pic page4_first_pic_1 wow zoomIn" data-wow-duration=".3s" data-wow-delay="1.2s"></div>
                        <div class="page4_first_pic page4_center_pic wow zoomIn" data-wow-duration=".3s" data-wow-delay="1.2s"></div>
                        <div class="page4_last_pic  page4_last_pic_1 wow zoomIn" ata-wow-duration=".2s" data-wow-delay="1s"></div>
                        <div class="page4_last_pic wow zoomIn" ata-wow-duration=".5s" data-wow-delay="1.8s"></div>
                   </div>
                    <a onclick="_hmt.push(['_trackEvent', 'PC工具下载', 'PC下载页', '下载-底部']);" href="{:C('LOCAL_DOMAIN')}/download/pc" class="btn1 page1_btn_1 page4_btn_1">立即下载</a>
           </div>
    </section>
    <section class="page5">
         <div class="main_comtain">
              <div class="col-50 left">
                  <p  class="page5_text_1">更新日志</p>
                  <p  class="title4 page5_text_2">66Play APP的更新情况将第一时间在此呈现，</p>
                  <p  class="title4 page5_text_2">为小伙伴们带来更好的体验是我们一直以来的追</p>
                  <p  class="title4 page5_text_2">求和目标。</p>
                  <div class="page5_book_1"></div>
              </div>
              <div class="col-50 left">
                    <div class="version_info_show">
                        <volist name="logs" id="log_data">
                            <table style="width:100%;">
                                <tr>
                                     <th class="version_head_4">{$log_data[0].year}年<div class="triangle-down"></div></th>
                                     <th class="version_head_6"></th>
                                     <th style="version_head_5"></th>
                                </tr>
                                <volist name="log_data" id="log" key="index">
                                 <tr>
                                     <td class="version_head_4 version_body_title" style="vertical-align:top;">
                                               <span></span>
                                               <p class="page5_text_1_t">{$log.public_date}</p>
                                               <p class="page5_text_1_t">版本:{$log.outer_version}</p>
                                     </td>
                                     <td class="version_head_6">
                                                <p class="sub_pc_title sub_pc_title_1">{$log.detail}</p>
                                                <volist name="log.log" id="l">
                                                  <p class="sub_pc_title">{$l}</p>
                                                </volist>
                                     </td>
                                     <if condition="$index elt 2">
                                     <td class="version_head_5 version_head_5_1">

                                        <a onclick="_hmt.push(['_trackEvent', 'PC指定版本下载', 'PC下载页', '版本:{$log.outer_version}'])" href="{$log.url}" class="down_btn_pc">下载</a> 
                                     </td>
                                     </if>
                                </tr>
                                </volist>
                            </table>
                        </volist>
                    </div>
              </div>
         </div>
    </section>
</block>
<block name="script">
    <script src="__ASSET__/Home/v4/lib/js/jwplayer.js"></script>
    <script>
       window._COMMON = {
              public_url : "__ASSET__",
        }
        wow = new WOW({
          boxClass:     'wow',      // default
          animateClass: 'animated', // default
          offset:       0,          // default
          mobile:       true,       // default
          live:         true        // default
      })
      wow.init();
      $(window).scroll(function() {
          if($(window).scrollTop()>=100){
              $("#headernav").addClass("header_nav");
          }else{
              $("#headernav").removeClass("header_nav");
          }
     });
       $(function(){
         $(".version_info_show").mCustomScrollbar();
      })
      var  video={
            'image': "{:C('WEB_DOWNLOAD_IMAGE')}",
            'file': "{:C('WEB_DOWNLOAD_VIDEO')}"
      };
      var data={};
      $(window).scroll(function () {
          var page_ele=$("#page3")[0];
          if(page_ele){
                  var clientHeight=document.documentElement.clientHeight;
                  var top=$(".page2").position().top;
                  var scrollTop=$(window).scrollTop();
                  var is_visible =scrollTop+120 > top && scrollTop < (top+$("#page3").height());
                  if(is_visible){
                       if(!data.is_playing && !data.player){
                             data.player=initPlayer(video.image,video.file);
                       } 
                       data.is_playing=true;
                       data.player.play(true);
                  }
                  if(!is_visible && data.is_playing){
                      data.is_playing=false;
                      data.player.play(false);
                  }
          }
      }) 
      function  initPlayer  (image,file) {
            var player=jwplayer("mod_player").setup({
                          flashplayer:_COMMON.public_url + '/Home/v4/lib/js/jwplayer.flash.swf',
                          image:image,
                          file:file,
                          controlbar: "over",  //控制条位置
                          screencolor: "#fff",   //播放器颜色
                          stretching: "fill",    //画面自适应
                          repeat:true,       //重复播放
                          autostart:false,         //自动播放
                          //mute: true,             //静音
                          width:'100%',
                          aspectratio:'16:9',
                          modes: [
                                { type: 'html5' },
                                { type: 'flash', 'src': '/Home/v4/lib/js/jwplayer.flash.swf' },
                                { type: 'download' }
                          ]
                }); 
              return  player;
      }
     </script>
</block>